<template>
  <div ref="chartdiv">

    <div ref="chart" style="width: 100%;" :style="'height:'+ height"></div>

  </div>
</template>
<script>
  // import ecStat from 'echarts-stat'

  export default {
    name: 'mchart',
    props: {
      rowData: {
        type: Object,
        default: () => {
          return {

          }
        }
      },
      height: {
        type: String,
        default: '300px'
      },
      type: {
        type: String,
        default: ''
      }

    },
    data() {
      return {
        chart: null,
        color: '#00CED1',
        clientHeight: 1080,
        colors: ['#5470c6', '#31BA4B', '#ee6666', '#07FDE6', '#145272', '#fc8452', '#892DD6', '#ea7ccc', '#523F81',
          '#B85C73'
        ],
        rgbColor: [
          ['rgba(103, 23, 205, 0.7)', 'rgba(40, 113, 250, 0.1)'],
          ['rgba(79, 172, 254, 0.6)', 'rgba(0, 242, 254, 0.1)'],
          ['rgba(255,123,136,0.7)', 'rgba(255,123,136,0.2)'],
          ['rgba(68,203,255,0.8)', 'rgba(68,203,255,0.4)']
        ],
        color1: null,
        color2: null,
        color3: null,
        color4: null,


      }
    },
    mounted() {
      // this.clientHeight = getClientHeight()
      this.initeCharts()
    },
    methods: {
      initeCharts() {
        // 基于准备好的dom，初始化echarts实例
        if (!this.chart) {
          this.chart = this.$echarts.init(this.$refs.chart);
          window.addEventListener("resize", () => {
            // this.clientHeight = getClientHeight()
            this.chart.resize();
          });

        }
        // 绘制图表
        // this.refreshPanelChart()

      },
      resize() {
        // this.clientHeight = getClientHeight()
        this.chart.resize();
      },
      clearChart() {
        this.chart.clear();
      },

      refreshPanelChart() {
        this.chart.setOption(this.makePanelOption());
      },
      refreshBarChart() {
        this.chart.setOption(this.makeBarOption());
      },
      refreshLineChart() {
        this.chart.setOption(this.makeLineOption());
      },
      refreshPieChart() {
        this.chart.setOption(this.makePieOptioin());
      },

      makePanelOption() {
        let self = this
        return {
          legend: {
            show: false,
            textStyle: {
              color: "rgba(255, 255, 255, 1)",
              fontSize: 10,
            },
            itemHeight: 12,
          },
          animation: true,
          tooltip: {
            show: false,
          },
          grid: {
            containLabel: false,
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            show: false
          },
          series: [{
              type: 'gauge',
              center: ['50%', '66%'],
              startAngle: 180,
              endAngle: 0,
              min: 0,
              max: this.rowData.value > 100 ? this.rowData.value * 1.1 : 100,
              splitNumber: 10,
              itemStyle: {
                color: '#02C3A2',
                opacity: 0.8

              },
              progress: {
                show: true,
                width: 20,
              },
              pointer: {
                icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
                length: '14%',
                width: 8,
                offsetCenter: [0, '-36%'],
                itemStyle: {
                  color: '#02C3A2'
                }
              },
              axisLine: {
                lineStyle: {
                  width: 20
                }
              },
              axisTick: {
                distance: -34,
                splitNumber: 5,
                length: 3,
                lineStyle: {
                  width: 1,
                  color: '#02C3A2'
                }
              },
              splitLine: {
                show: false,

              },
              axisLabel: {
                show: false,

              },
              anchor: {
                show: false
              },
              title: {
                show: false
              },
              detail: {

                fontSize: 15 / 1080 * self.clientHeight,
                offsetCenter: [0, '50%'],
                valueAnimation: true,
                formatter: function(value) {
                  return self.rowData.name + "：" + Math.round(self.rowData.value) + 'kwh';
                },
                color: '#ffffff'
              },
              data: [{
                value: this.rowData.value
              }]
            },

          ]


        }

      },
      makeBarOption() {
        let data = [{
          value: 100,
          itemStyle: {
            color: this.colors[0]
          }
        }, {
          value: 10,
          itemStyle: {
            color: this.colors[1]
          }
        }, {
          value: 30,
          itemStyle: {
            color: this.colors[2]
          }
        }]
        return {
          grid: {
            top: 10,
            left: 20,
            right: 0,
            bottom: 25,
          },
          xAxis: {
            type: 'category',
            data: this.rowData.x,
            axisLabel: {
              show: true,
              margin: 2,
              fontSize: 11,
              color: "rgba(255, 255, 255, 1)",
              rotate: 30,
              interval: 0
            }
          },
          yAxis: {
            type: 'value',
            splitLine: false,
            axisLabel: {
              show: true,
              margin: 2,
              fontSize: 11,
              color: "rgba(255, 255, 255, 1)"
            },


          },
          series: [{
            data: this.rowData.y,
            type: 'bar'
          }]
        };
      },
      makeLineOption() {
        let colorindex = 1
        if (this.rowData.color) {
          colorindex = this.rowData.color
        }
        return {
          tooltip: {
            show: true,
            trigger: 'axis',
            // appendToBody: true,
            backgroundColor: 'rgba(0,81,182,0.5)',
            borderColor: '#004A95',
            textStyle: {
              color: '#ffffff'
            },
            formatter: '{b} :<br />'+this.rowData.pointName+': {c}'
            // axisPointer: {
            //       type: 'cross'
            //     }
          },
          legend: {
            show: false,
          },
          grid: {
            top: 30,
            left: 36,
            right: 30,
            bottom: 20,
            containLabel: true
          },
          xAxis: {
            // name:'mm',
            type: 'category',
            boundaryGap: false,
            data: this.rowData.x,
            axisLabel: {
              show: true,
              margin: 10,
              fontSize: 12 ,
              color: "rgba(133, 154, 165, 1)",
              // rotate: 30,
              // interval: 10
            },
            splitLine:{
              show:true,
              lineStyle: {
                type: 'dashed',
                width: 1,
                color: 'rgba(27, 175, 254, 0.2)'
              }
            }
            // min:1,
            // max:this.rowData.y.length,
            // splitNumber:this.rowData.y.length>30?2:10,
            // nameTextStyle: {
            //   color: "#fff",
            //   fontSize: 12   ,
            // },
            // nameLocation: "end",
            // nameGap: 5
          },
          yAxis: {
            type: 'value',
            // name:this.rowData.pointName,
            splitLine: {
              show:true,
              lineStyle: {
                type: 'dashed',
                width: 1,
                color: 'rgba(27, 175, 254, 0.2)'
              }
            },
            axisLabel: {
              show: true,
              margin: 10,
              fontSize: 12 ,
              color: "rgba(133, 154, 165, 1)",
              // rotate: 30,
              // interval: 0
            },
            max: (value) => {
              let max = Math.ceil(value.max * 1.2)

              return max
            }
          },
          series: [{
            data: this.rowData.y,
            type: 'line',
            showSymbol: false,
            smooth: true,
            itemStyle: {
              color: this.rgbColor[colorindex][0]
            },
            areaStyle: {
              color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: this.rgbColor[colorindex][0]
                },
                {
                  offset: 1,
                  color: this.rgbColor[colorindex][1]
                }
              ])
            },
          }]
        };
      },
      makePieOptioin() {
        if (this.color1 == null) {
          this.color1 = new this.$echarts.graphic.LinearGradient(1, 1, 0, 1, [{
            offset: 0,
            color: "rgba(255, 102, 0, 1)"
          }, {
            offset: 1,
            color: "rgba(255, 102, 0, 0.4)"
          }], false);
        }
        if (this.color2 == null) {
          this.color2 = new this.$echarts.graphic.LinearGradient(1, 1, 0, 1, [{
            offset: 0,
            color: "rgba(40, 242, 230, 1)"
          }, {
            offset: 1,
            color: "rgba(40, 242, 230, 0.4)"
          }], false);
        }

        if (this.color3 == null) {
          this.color3 = new this.$echarts.graphic.LinearGradient(1, 1, 0, 1, [{
            offset: 0,
            color: "rgba(255, 204, 0, 1)"
          }, {
            offset: 1,
            color: "rgba(255, 204, 0, 0.4)"
          }], false);
        }
        if (this.color4 == null) {
          this.color4 = new this.$echarts.graphic.LinearGradient(1, 1, 0, 1, [{
            offset: 0,
            color: "rgba(0, 203, 255, 1)"
          }, {
            offset: 1,
            color: "rgba(0, 203, 255, 0.4)"
          }], false);
        }

        let radius0 = 28
        let radius1 = 78

        return {
          tooltip: {
            trigger: 'item',
            appendToBody: true,
            backgroundColor: 'rgba(0,81,182,0.5)',
            borderColor: '#004A95',
            textStyle: {
              color: '#ffffff'
            },
            formatter: '{b} : {c}mm ({d}%)'
          },
          legend: {
            bottom: "10%",
            textStyle: {
              color: "rgba(255, 255, 255, 1)",
              fontSize: 14,
            },
            itemHeight: 14,
            // orient: 'vertical',
            // left: 'left'
          },
          color: [this.color1, this.color2,this.color3,this.color4],

          series: [{
            // name: '能耗分布',
            type: 'pie',
            left: 0,
            top: 0,
            radius: [radius0, radius1],
            center: ['50%', '40%'],
            roseType: 'radius',
            data: this.rowData.data,
            // itemStyle: {
            //       borderWidth: 30,
            //       borderType: "solid",
            //       borderColor: "rgba(234, 22, 22, 1)"
            //     },
            label: {
              fontSize: 14,
              color: '#ffffff',
              alignTo: 'labelLine',
              distanceToLabelLine: -25,
              lineHeight: 18,
              formatter: '{b}\n {c}'
            },
            labelLine: {
              length: 20,
              length2: 25
            },
            width: "100%",
            height: "100%"

          }]
        };
      }

    }
  }
</script>

<style>
  .linelabel {
    display: inline-block;
    border-radius: 40px;
    border: 10px dashed hotpink;
    padding: 10px;
  }
</style>
